<!DOCTYPE html>
<html>
<head>
    <title>项目列表</title>
  <style type="text/css" >
    html {
      background: url("/img/bg.png") no-repeat center center fixed;
      background-size: cover;
    }
    body {
      text-align: center;
    }
    h2 {
      margin-top: 30px;
      color: white;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="/css/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="/css/themes/icon.css">
  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <script type="text/javascript" src="/js/jquery.easyui.min.js"></script>
  <script src="/js/jquery.cookie.js"></script>
</head>
<body>
<h2>项目列表</h2>
<center>
<table id="dg" align="center" class="easyui-datagrid" title="项目列表" style="width: 700px;height:auto"
       data-options="
				iconCls: 'icon-edit',
				singleSelect: true,
				toolbar: '#tb',
				onClickRow: onClickRow"
       url="/project/projectList.do"
       rownumbers="true" pagination="true">
  <thead>
  <tr>
    <th data-options="field:'id',width:100">项目编号</th>
    <th data-options="field:'name',width:200,
                      editor:{
                              type:'textbox',
                              options:{
                                required:true
                              }
                      }">项目名</th>
    <th data-options="field:'createDate',width:100,align:'left',
                      editor:{
                              type:'datebox',
                              options:{
                                required:true
                              }
                      }">创建日期</th>
    <th data-options="field:'status',width:200,editor:'textbox'">状态</th>
  </tr>
  </thead>
</table>
</center>
<div id="tb" style="height:auto">
  <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">添加</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">删除</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" onclick="accept()">保存</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" onclick="reject()">还原</a>
  <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true" onclick="tasks()">任务列表</a>
</div>
<script type="text/javascript">
  var editIndex = undefined;
  var del = new Array();
  function endEditing(){
    if (editIndex == undefined){return true}
    if ($('#dg').datagrid('validateRow', editIndex)){
      $('#dg').datagrid('endEdit', editIndex);
      editIndex = undefined;
      return true;
    } else {
      return false;
    }
  }
  function onClickRow(index){
    if (editIndex != index){
      if (endEditing()){
        $('#dg').datagrid('selectRow', index)
                .datagrid('beginEdit', index);
        editIndex = index;
      } else {
        $('#dg').datagrid('selectRow', editIndex);
      }
    }
  }
  function tasks(){
    var row = $('#dg').datagrid('getSelected');
    if(row) {
      $.cookie('projectId', row.id, {path:"/"});
      $.cookie('projectName', row.name, {path:"/"});
      self.location = "/task/tasksOfProject.do";
    }
  }
  function append(){
    if (endEditing()){
      $('#dg').datagrid('appendRow',{createDate:Date.now()});
      editIndex = $('#dg').datagrid('getRows').length-1;
      $('#dg').datagrid('selectRow', editIndex)
              .datagrid('beginEdit', editIndex);
    }
  }
  function removeit(){
    if (editIndex == undefined){return}
    var row = $('#dg').datagrid('getSelected');
    del.push(row.id);
    $('#dg').datagrid('cancelEdit', editIndex)
            .datagrid('deleteRow', editIndex);
    editIndex = undefined;
  }
  function accept(){
    if (endEditing()){
      var rows = $('#dg').datagrid('getChanges');
      delRows(del);
      postChange(rows);
      $('#dg').datagrid('acceptChanges');
    }
  }
  function reject(){
    $('#dg').datagrid('rejectChanges');
    editIndex = undefined;
  }
  function getChanges(){
    var rows = $('#dg').datagrid('getChanges');
    alert(rows.length+' rows are changed!');
  }
  function postChange(rows){
    if(rows){
      var newRows = createPosts(rows);
      postRows(newRows);
    }
  }
  function createPosts(rows){
    var newRows = new Array();
    for(var i = 0; i < rows.length; i++) {
      for(var j = 0; j < del.length; j++) {
        if(rows[i].id == del[j]) break;
      }
      if(j == del.length) newRows.push(rows[i]);
    }
    return newRows;
  }
  function postRows(rows){
    if(rows) {
      $.ajax({
        type:"POST",
        contentType:"application/json",
        url:"/project/addOrUpdateProjects.do",
        data:JSON.stringify(rows),
        success:function(data){
          var obj = eval('(' + data + ')');
          if(obj.status != "success"){
            alert(obj.msg);
            reject();
          }
        },
        error:function(XMLHttpRequest, textStatus, errorThrown) {
          alert(XMLHttpRequest.status + ':' + textStatus);
        }
      });
    }
  }
  /**
   * 删除行
   * @param rows
   */
  function delRows(rows){
    if(rows) {
      $.ajax({
        type:"POST",
        contentType:"application/json",
        url:"/project/delProjects.do",
        data:JSON.stringify(rows),
        success:function(data){
          del = [];
          var obj = eval('(' + data + ')');
          if(obj.status != "success"){
            alert(obj.msg);
            reject();
          }
        },
        error:function(XMLHttpRequest, textStatus, errorThrown) {
          del = [];
          alert(XMLHttpRequest.status + textStatus);
        }
      });
    }
  }
  function allPrpos ( obj ) {
    // 用来保存所有的属性名称和值
    var props = "" ;
    // 开始遍历
    for ( var p in obj ){ // 方法
      if ( typeof ( obj [ p ]) == " function " ){ obj [ p ]() ;
      } else { // p 为属性名称，obj[p]为对应属性的值
        props += p + " = " + obj [ p ] + " /t " ;
      } } // 最后显示所有的属性
    alert ( props ) ;
  }
</script>
<link rel="stylesheet" type="text/css" href="/css/custom.css">
<div id="footer">
  <ul>
    <li>
      <div class="cell">
        <a href="/project/list.do">项目</a>
      </div>
    </li>
    <li>
      <div class="cell">
        <a href="/task/list.do">任务</a>
      </div>
    </li>
    <li>
      <div class="cell">
        <a href="/employee/manageEmployee.do">我的</a>
      </div>
    </li>
  </ul>
</div>
</body>
</html>
